<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wechat{ float: left; background-color: #87c5ff;}
        .wechat
        .wechat_code{display: none; height: 32px; width: 100px; background: red;}
        .wechat:hover
        .wechat_code{display: block;}

    </style>
    <script>
        var timer;
        $(".user_header a").mouseover(function () {
            clearTimeout(timer);
            $(".userInfo").show();
        });
        $(".user_header a").mouseout(function () {
            timer = setTimeout(function () {
                $(".userInfo").hide();
            }, 500);
        });
        $(".user_ul").mouseover(function () {
            clearTimeout(timer);
        });
        $(".user_ul").mouseout(function () {
            $(".userInfo").hide();
        });
    </script>
</head>
<body>
<div class="wechat">
    <h2 class="wechat_account">我是微信号</h2>
    <div class="wechat_code">我是1维码</div>
    <div class="wechat_code">我是2维码</div>
    <div class="wechat_code">我是3维码</div>
</div>

<style>
    ul.menu, ul.menu li{margin:0px;padding:0px;list-style:none;position:relative;}
    ul.menu li{line-height:25px}
    ul.menu li{float:left;margin-left:10px}
    ul.menu div{display:none;position:absolute;top:20px;left:0px}
    ul.menu div a{display:block}
    ul.menu li:hover div{display:block;}
    .tit {
        background-color: #98bf21;
    }
</style>

<!--<div class="menu">-->

    <ul class="menu">
        <li>
            <a calss="tit" >Menu1</a>
            <div>
                <a href="#">menu11</a>
                <a href="#">menu12</a>
            </div>
        </li>
        <li><a href="#">Menu2</a><div><a href="#">menu21</a><a href="#">menu22</a></div></li>
        <li><a href="#">Menu3</a><div><a href="#">menu31</a><a href="#">menu32</a></div></li>
    </ul>

<!--</div>-->

<div class="user_header">
    <a class="user_a" href="javascript:void(0);"><label runat="server" id="user"></label><i class="user_arrow"></i></a>
    <div class="userInfo">
        <ul class="user_ul">
            <li><a href="#"><i class="user_perInfo"></i>个人信息</a></li>
            <li><a href="#"><i class="user_lock"></i>锁定屏幕</a></li>
            <li><a href="#"><i class="user_key"></i>退出</a></li>
        </ul>
    </div>
</div>

</body>
</html>